<template>
	<view class="content">
		<view class="fj">
			<view class="search">
				<u-search placeholder="搜索你想要去的电站" v-model="formData.searchName" :showAction="false" height="35"
					@search="gotosearch"></u-search>
			</view>

			<block v-if="isSearch">
				<view class="list" v-if="list.length > 0">
					<scroll-view scroll-y="true" @scrolltolower="lowerBottom" style="height:85vh;">
						<charger-item :list="list" :distance="false" @gotodetail="gotodetail"></charger-item>
						<view class="medicine_title" v-if="formData.searchName">
							{{ isFinished ? '没有更多数据了～' : '下拉加载更多'}}
						</view>
					</scroll-view>
				</view>

				<view class="empty-placeholder" v-if="list.length == 0">
					<text class="text">暂无符合的记录</text>
				</view>
			</block>

			<!-- 历史搜索记录 -->
			<view class="history" v-else>
				<view class="item" @click="historyTap(index)" v-for="(keyword, index) in historyList" :key="index">
					{{ keyword }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				keyword: '',
				currentpage: 1, // 当前页码
				isBottom: false, // 是否请求完毕数据
				isLoading: false,
				isFinished: false,
				isSearch: false,
				formData: {
					pageNo: 1,
					pageSize: 50,
					searchName: ''
				},
				historyList: [] // 存储历史搜索记录
			}
		},
		created() {
			// 从 localStorage 读取历史记录
			const history = uni.getStorageSync('searchHistory');
			if (history) {
				this.historyList = history;
			}
		},
		onReachBottom() {
			this.getlist();
		},
		methods: {
			getlist() {
				if (this.isFinished || this.isLoading) return
				this.isLoading = true
				this.$http_api.chargingList(this.formData).then((res) => {
					let {
						records,
						total,
						current,
						pages
					} = res

					// 处理标签
					records = records.map(item => {
						const labels = [];
						if (item.serviceTypes) {
							labels.push(...this.getFilterLabels('serviceType', item.serviceTypes))
						}
						if (item.technologyFeatures) {
							labels.push(...this.getFilterLabels('technologyFeatures', item.serviceTypes))
						}
						item.labels = labels
						return item;
					})

					// 追加数据
					this.list = this.formData.pageNo === 1 ? records : [...this.list, ...records]

					// 判断是否加载完成
					this.isFinished = current >= pages

					// 更新页码
					this.formData.pageNo++
				})
			},

			getFilterLabels(type, indices) {
				if (!Array.isArray(indices) || !this.$store.state[type]) {
					return [];
				}
				return indices
					.map(index => this.$store.state[type][index - 1]?.name.replace(/(\r\n)+/g, ' ').replace(/[\r\n]/g, ' '))
					.filter(Boolean);
			},

			gotodetail(id) {
				uni.navigateTo({
					url: "/pages/index/detail?id=" + id
				})
			},

			historyTap(index) {
				const keyword = this.historyList[index];
				this.formData.searchName = keyword;
				this.gotosearch();
			},

			// 关键词搜索
			gotosearch() {
				const keyword = this.formData.searchName.trim();
				if (keyword) {
					// 去重
					if (!this.historyList.includes(keyword)) {
						this.historyList.unshift(keyword);
					}
					// 保存到 localStorage
					uni.setStorageSync('searchHistory', this.historyList);
				}
				this.formData.pageNo = 1;
				this.isSearch = true;
				this.isFinished = false;
				this.isLoading = false;
				this.list = []

				this.getlist()
			},

			// 滚到底部
			lowerBottom() {
				if (!this.isBottom) {
					this.currentpage += 1
					this.getlist()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('~@/static/css/station.css');

	.content {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}

	.u-demo-block {
		width: 100%;
		margin-top: 20rpx;
	}

	.search {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.medicine_title {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin: 60rpx 0;
	}

	.fj {
		margin-top: 40rpx;
	}

	.history {
		display: flex;

		.item {
			padding: 10rpx 25rpx;
			border-radius: 100rpx;
			font-size: 26rpx;
			margin: 0 20rpx 20rpx 0;
			background: #eee;
			border: 1rpx solid #ddd;
		}
	}
</style>